import uniqueId from '@form-create/utils/lib/unique';
import {localeProps, makeRequiredRule} from '../../utils';

const label = '日期';
const name = 'jd-datePicker';

export default {
    icon: 'icon-date',
    label,
    name,
    rule({t}) {
        return {
            type: 'datePicker',
            field: 'RQ',
            title: '日期',
            info: '',
            $required: false,
            validate: false,
            style: {
                width: '100%'
            },
            props: {
                type: 'date'
            },
        };
    },
    watch: {
        'type': function(val) {
            if (val.value == 'monthrange' | val.value == 'daterange' | val.value == 'datetimerange'){
                val.api.rule[3].children[1].hidden = false;
                val.api.rule[4].hidden = false;
                val.api.rule[5].hidden = false;
            } else {
                val.api.rule[3].children[1].hidden = true;
                val.api.rule[4].hidden = true;
                val.api.rule[5].hidden = true;
            }
        }
    },
    props(_, {t}) {
        return localeProps(t, name + '.props', [
            {type: 'input', field: 'placeholder', title: '占位文本'},
            makeRequiredRule(), 
            {
                type: 'select',
                field: 'type',
                title: '显示类型',
                options: [
                    {label: '年(YYYY)', value: 'year'}, 
                    {label: '月(YYYY-MM)', value: 'month'}, 
                    {label: '日(YYYY-MM-DD)',value: 'date'}, 
                    {label: '日(YYYY-MM-DD,YYYY-MM-DD)', value: 'dates'}, 
                    {label: '时间(YYYY-MM-DD HH:mm:ss)',value: 'datetime'}, 
                    {label: '时间段(YYYY-MM)', value: 'monthrange'},
                    {label: '时间段(YYYY-MM-DD)',value: 'daterange'}, 
                    {label: '时间段(YYYY-MM-DD HH:mm:ss)', value: 'datetimerange'}
                ]
            },
            {
                type: 'row',
                props: {gutter: 5},
                children: [
                    {
                        type: 'col',
                        props: {span: 12},
                        children: [
                            {type: 'JdIconSelect', field: 'prefixIcon', title: '头部图标',style: { width: '200px'}}
                        ]
                    },
                    {
                        type: 'col',
                        props: {span: 12},
                        hidden: true,
                        children: [
                            {type: 'input', field: 'rangeSeparator', title: '分隔符'}
                        ]
                    }
                ]
            }, 
            {
                type: 'row',
                props: {gutter: 5},
                hidden: true,
                children: [
                    {
                        type: 'col',
                        props: {span: 12},
                        children: [
                            {type: 'input',field: 'startPlaceholder',title: '占位文本(开始)'}
                        ]
                    },
                    {
                        type: 'col',
                        props: {span: 12},
                        children: [
                            {type: 'input', field: 'endPlaceholder', title: '占位文本(结束)'}
                        ]
                    }
                ]
            },
            {type: 'input',field: 'format',hidden: true,title: '显示格式化'},
            {
                type: 'col',
                props: {span: 12},
                children: [
                    {type: 'switch', field: 'disabled', title: '是否禁用'}, 
                ]
            },
            {
                type: 'col',
                props: {span: 12},
                children: [
                    {type: 'switch', field: 'readonly', title: '是否只读'}, 
                ]
            },
        ]);
    }
};
